const useColorLog = () => {
    const isProduction = import.meta.env.MODE === "production"

    /**
     * Check if a value is null, undefined or an empty string.
     */
    const isEmpty = (value: unknown): boolean => {
        return value == null || value === ""
    }

    /**
     * Fallback to default text if content is empty.
     */
    const convert = (content: string, fallback: string): string => {
        return isEmpty(content) ? fallback : content
    }

    /**
     * Pretty print formatted logs using console.log with CSS styles.
     */
    const prettyPrint = (title: string, text: string, color: string): void => {
        console.log(
            `%c ${title} %c ${text} %c`,
            `background:${color}; border:1px solid ${color}; padding:1px; border-radius:2px 0 0 2px; color:#fff;`,
            `border:1px solid ${color}; padding:1px; border-radius:0 2px 2px 0; color:${color};`,
            "background:transparent"
        )
    }

    /**
     * Factory to create colored log functions (info, error, etc).
     */
    const logWithColor = (defaultTitle: string, color: string) => {
        return (textOrTitle: string, content?: string): void => {
            if (isProduction) return
            const title = isEmpty(content) ? defaultTitle : textOrTitle
            const text = convert(content as string, textOrTitle)
            prettyPrint(title, text, color)
        }
    }

    const info = logWithColor("Info", "#909399")
    const error = logWithColor("Error", "#F56C6C")
    const warning = logWithColor("Warning", "#E6A23C")
    const success = logWithColor("Success", "#67C23A")

    /**
     * Print a simple mock table to console with stylized headers and rows.
     */
    const table = (): void => {
        if (isProduction) return
        const data = [
            { id: 1, name: "Alice", age: 25 },
            { id: 2, name: "Bob", age: 30 },
            { id: 3, name: "Charlie", age: 35 },
        ]

        console.log(
            "%c id%c name%c age",
            "color: white; background-color: black; padding: 2px 10px;",
            "color: white; background-color: black; padding: 2px 10px;",
            "color: white; background-color: black; padding: 2px 10px;"
        )

        data.forEach(({ id, name, age }) => {
            console.log(
                `%c ${id} %c ${name} %c ${age} `,
                "color: black; background-color: lightgray; padding: 2px 10px;",
                "color: black; background-color: lightgray; padding: 2px 10px;",
                "color: black; background-color: lightgray; padding: 2px 10px;"
            )
        })
    }

    /**
     * Print an image to the console using CSS background-image and canvas.
     */
    const picture = (url: string, scale: number = 1): void => {
        if (isProduction) return

        const img = new Image()
        img.crossOrigin = "anonymous"

        img.onload = () => {
            const canvas = document.createElement("canvas")
            const ctx = canvas.getContext("2d")
            if (!ctx) return

            canvas.width = img.width
            canvas.height = img.height
            ctx.drawImage(img, 0, 0)

            const dataUri = canvas.toDataURL("image/png")

            console.log(
                `%c image`,
                `
                font-size: 1px;
                padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
                background-image: url(${dataUri});
                background-repeat: no-repeat;
                background-size: ${img.width * scale}px ${img.height * scale}px;
                color: transparent;
                `
            )
        }

        img.src = url
    }

    return {
        info,
        error,
        warning,
        success,
        table,
        picture,
    }
}

export default useColorLog
